<!-- 公众号小程序授权页面 -->
<template>
  <div class="app-main-content-box">
    <div class="auth-container">
      <div class="title clearfix">
        <div class="fl">
          <strong>公众号授权</strong>
        </div>
        <div
          v-if="!$store.getters.banBtnList.includes('BTN_MP_AUTH')"
          class="fr"
        >
          <el-button
            v-if="mpInfo.default.auth"
            type="primary"
            size="medium"
            round
            @click="getAuthUrl(1)"
            >重新授权</el-button
          >
          <el-button
            v-else
            type="success"
            size="medium"
            round
            @click="getAuthUrl(1)"
            >申请授权</el-button
          >
        </div>
      </div>

      <div class="content">
        <div class="noAuth" v-if="!mpInfo.default.auth">
          暂未授权，你需要先进行公众号授权后才可以使用相关功能
        </div>
        <el-form v-else label-width="100px" size="small">
          <el-form-item label="公众号状态：">
            <el-tag v-if="mpInfo.default.auth.base.state === 1" type="success"
              >已授权</el-tag
            >
            <el-tag v-if="mpInfo.default.auth.base.state === 0" type="danger"
              >授权异常</el-tag
            >
            <div v-if="mpInfo.default.auth.base.state === 0">
              <el-alert
                style="width: 300px; margin-top: 10px; padding: 5px 5px"
                :closable="false"
                :title="mpInfo.default.auth.base.remark"
                type="error"
              ></el-alert>
            </div>
          </el-form-item>
          <el-form-item label="公众号名称：">
            <div>{{ mpInfo.default.auth.info.nickName }}</div>
          </el-form-item>

          <el-form-item label="appId：">
            <div>{{ mpInfo.default.auth.base.appId }}</div>
          </el-form-item>

          <el-form-item label="已授予权限：">
            <div>{{ mpInfo.default.auth.permsStr }}</div>
          </el-form-item>
          <el-form-item
            v-if="mpInfo.default.auth.missingPermsStr"
            style="color: crimson"
            label="缺少权限："
          >
            <div>{{ mpInfo.default.auth.missingPermsStr }}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- <div class="auth-container">
      <div class="title clearfix">
        <div class="fl">
          <strong>小程序授权</strong>
        </div>
        <div v-if="!$store.getters.banBtnList.includes('BTN_MA_AUTH')" class="fr">
          <el-button v-if="ma" @click="getAuthUrl(2)" size="medium" round type="primary">重新授权</el-button>
          <el-button v-else @click="getAuthUrl(2)" size="medium" round type="success">申请授权</el-button>
        </div>
      </div>

      <div class="content">
        <div class="noAuth" v-if="!ma">暂未授权，你 需要先进行小程序授权后才可以使用相关功能</div>
        <el-form v-else label-width="100px" size="small">
          <el-form-item label="小程序状态：">
            <el-tag v-if="ma.base.state === 1" type="success">已授权</el-tag>
            <el-tag v-if="ma.base.state === 0" type="danger">授权异常</el-tag>
            <div v-if="ma.base.state === 0">
              <el-alert
                style="width: 300px; margin-top: 10px; padding: 5px 5px"
                :closable="false"
                :title="ma.base.remark"
                type="error"
              ></el-alert>
            </div>
          </el-form-item>

          <el-form-item label="小程序名称：">
            <div>{{ ma.info.nickName }}</div>
          </el-form-item>
          <el-form-item label="appId：">
            <div>{{ ma.base.appId }}</div>
          </el-form-item>
          <el-form-item label="已授予权限：">
            <div>{{ ma.permsStr }}</div>
          </el-form-item>
          <el-form-item v-if="ma.missingPermsStr" style="color: crimson" label="缺少权限：">
            <div>{{ ma.missingPermsStr }}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>-->
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { getWechatAuthUrl, checkAuth } from "@/api/wechat.js";
import { SCOPE } from "@/utils";

export default {
  data() {
    return {};
  },

  computed: {
    ...mapGetters(["mpInfo"]),
  },

  mounted() {
    // this.getAuthInfo();
    this.checkAuthResult();
  },

  methods: {
    /**
     *  获取数据
     */
    ...mapActions(["getAuthMp"]),
    // 检查结果
    checkAuthResult() {
      let preAuthCode = this.$route.query["preAuthCode"];
      if (!preAuthCode || localStorage.getItem(preAuthCode)) {
        this.getAuthInfo();
      } else {
        this.check(preAuthCode);
      }
    },

    // 获取授权数据
    getAuthInfo() {
      this.getAuthMp({ classifyCode: "DEFAULT", scope: 3 });
    },

    check(preAuthCode) {
      // 重新获取数据
      // TODO 根据预授权码查询授权状态, 可能要遍历查询, 后台有延迟
      checkAuth(preAuthCode).then((res) => {
        this.getAuthInfo();
        if (res.data.state === 1) {
          // 授权成功
          localStorage.setItem(preAuthCode, "check");
          this.$notify({
            title: "成功",
            message: "授权成功",
            type: "success",
            duration: 2000,
            offset: 40,
          });
        } else if (res.data.state === 0) {
          // 授权未完成
        } else if (res.data.state === 2) {
          // 授权失败
          const reason = res.data.reason;
          localStorage.setItem(preAuthCode, "check");
          this.$alert(reason, "授权异常", {
            confirmButtonText: "确定",
            type: "error",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },

    /**
     *  按钮组
     */
    // 申请授权
    getAuthUrl(authType) {
      let cb = location.protocol + "//" + location.host + "/#/public/auth";
      // location.pathname +
      // location.hash;
      getWechatAuthUrl({ authType, cb, scope: 3 }).then((res) => {
        // 预授权码
        window.location.href = res.data.url;
      });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.auth-container {
  margin-bottom: 20px;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  .title {
    padding: 5px 10px;
    height: 40px;
    line-height: 40x;
    border-radius: 5px;
    background: #eceff1;
    .fl {
      line-height: 30px;
    }
    span {
      font-size: 20px;
    }
    .el-button {
      height: 30px;
      line-height: 0;
    }
  }
  .content {
    padding: 5px 10px;
    .noAuth {
      text-align: center;
      height: 100px;
      line-height: 100px;
    }
    .el-row {
      margin: 5px;
    }
  }
}
</style>
